<template>
  <div class="product">
    <Category :scene="scene"></Category>
    <el-card class="box-card">
    <div v-if="scene==2?false:true">
      <el-button @click="addAttr" class="el-but" icon="el-icon-plus" :disabled="scene?false:true" type="primary">添加品牌</el-button>
      <el-empty v-if="scene?false:true" image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
      <el-table :data="attrList" v-else border>
        <el-table-column label="序号" width="80" type="index"></el-table-column>
        <el-table-column label="属性名称" width="180" prop="attrName"></el-table-column>
        <el-table-column label="属性值" >
          <template slot-scope="{row,column,$index}"> 
            <el-tag class="el-tag" v-for="item in row.attrValueList" type="success" :key="item.id">{{item.valueName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="{row,column,$index}">
            <el-button @click="handleClick(row)" type="warning" size="small">编辑</el-button>
            <el-button type="danger" @click="Delete(row.id)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <el-form label-width="80px">
        <el-form-item label="属性名称">
          <el-input v-model="attrParams.attrName" placeholder="请你输入属性名称"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="addAttrValue" :disabled="attrParams.attrName?false:true" icon="el-icon-plus" type="primary">添加属性值</el-button>
      <el-button @click="cancel" >取消</el-button>
      <el-table class="el-table" border :data="attrParams.attrValueList">
        <el-table-column type="index" label="序号" width="80" ></el-table-column>
        <el-table-column label="属性值">
          <template slot-scope="{row,column,$index}">
            <div :key="indexKey">
              <el-input v-show="row.showInput"  @blur="toLook(row,$index)" ref="myinput"  placeholder="请输入属性值" v-model="row.valueName"></el-input>
            </div>
            <div v-show="!row.showInput" >{{row.valueName}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" >
          <template slot-scope="{row,column,$index}">
            <el-button @click="remove($index)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
    </el-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { reqAttrList,reqAddOrUpdateAttr,reqDeleteAttr } from "@/api/category" 
import Category from '../../../components/category/index'
export default {
  name: 'Attr',
  data(){
    return {
      data: {},
      //平台属性数据
      attrList: [],
      //场景值
      scene: 0,
      //新增属性的参数
      attrParams: {
        attrName: "", //属性的名字
        attrValueList: [], //属性值数组
        categoryId: 0, //三级某一个分类的ID
        categoryLevel: 3, //代表三级分类
      },
      indexKey: 0,
    }
  },
  components:{
    Category
  },
  //定义方法
  methods: {
    // 获取平台属性的方法
    async getAttrList (data){
      this.data = data
      console.log(this.data);
      let result = await reqAttrList(data)
      console.log(result);
      this.attrList = result.data
      //展示平台属性
      this.scene = 1
    },
    //添加平台属性的回调
    addAttr(){
      this.reset()
      // console.log(1234);
      //修改场景值为1
      this.scene = 2
      this.attrParams.categoryId = this.data.category3Id
    },
    //添加属性值的回调
    addAttrValue(){
      this.indexKey++
      //点击此按钮需要向属性值的数组新增一个属性值对象---table多一行
      this.attrParams.attrValueList.push({
        valueName: "",
        showInput: true,
      })
      console.log(this.attrParams.attrValueList);
      this.$nextTick(()=>{
        this.$refs.myinput.focus()
      })
    },
    //输入属性值失去焦点
    toLook(row,index){
      row.showInput = false
      if(row.valueName.trim()==''){
        alert('属性值不能为空')
        //删除非法情况
        this.attrParams.attrValueList.splice(index,1)
        //出现非法情况:后面语句不在执行
        return 
      }
      //属性值重复的
      let repeat = this.attrParams.attrValueList.find((allAttrvalue)=>{
        if(row!=allAttrvalue){
          return row.valueName == allAttrvalue.valueName
        }
      })
      //重复
      if(repeat){
        alert('属性值不能重复')
        this.attrParams.attrValueList.splice(index,1)
        return
      }
      row.showInput = false
    },
    //删除属性值的回调
    remove(index){
      this.attrParams.attrValueList.splice(index,1)
    },
    //保存按钮的回调
    async save(){
      try{
        await reqAddOrUpdateAttr(this.attrParams)
        alert('成功')
        this.scene = 1
        this.getAttrList(this.data)
      }catch{
        alert('失败')
      }
    },
    //取消按钮的回调
    cancel(){
      this.scene = 0
    },
    //清空参数的方法
    reset (){
      Object.assign(this.attrParams,{
        attrName: "", //属性的名字
        attrValueList: [], //属性值数组
        categoryId: 0, //三级某一个分类的ID
        categoryLevel: 3, //代表三级分类
      })
    },
    async Delete(id){
      try{
        await reqDeleteAttr(id)
        alert('删除成功')
        this.getAttrList(this.data)
      }catch{
        alert('删除失败')
      }
    },
    //编辑按钮的回调
    handleClick(row){
      console.log(123465768999034);
      this.scene = 1
      Object.assign(this.attrParams,JSON.parse(JSON.stringify(row)))
    }
  },
  //计算属性
  computed:{
    ...mapGetters('category',['category3List'])
  },
  //生命周期钩子
  mounted(){
    this.$bus.$on('getData',this.getAttrList)
   
  }
}
</script>
<style scoped >
.product{
  padding: 20px;
}
.box-card{
  margin-top: 20px;
}
.el-but{
  margin-bottom: 20px;
}
.el-tag{
  margin-left: 6px;
}
.el-table{
  margin: 20px 0;
}
</style>